<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside width="200px">
        <img src="@/assets/wyy.png" />
        <el-menu :unique-opened="true" :router="true" default-active="ybp">


          <el-menu-item index="ybp">
            <template #title>
              <el-icon><Odometer /></el-icon>
              <span>仪表盘</span>
            </template>
          </el-menu-item>


          <el-sub-menu index="2">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>常用设置</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="jsgl">教师管理</el-menu-item>
              <el-menu-item index="xsgl">学生管理</el-menu-item>
              <el-menu-item index="gggl">公告管理</el-menu-item>
              <el-menu-item index="xtpz">系统配置</el-menu-item>
              <el-menu-item index="ptfwq">判题服务器</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


          <el-sub-menu index="3">
            <template #title>
              <el-icon><Aim /></el-icon>
              <span>问题</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="wtlb">问题列表</el-menu-item>
              <el-menu-item index="zjtm">增加题目</el-menu-item>
              <el-menu-item index="drdctm">导入导出题目</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


          <el-sub-menu index="4">
            <template #title>
              <el-icon><Trophy /></el-icon>
              <span>比赛.练习</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="bslb">比赛列表</el-menu-item>
              <el-menu-item index="cjbs">创建比赛</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>


          <el-sub-menu index="5">
            <template #title>
              <el-icon><Collection /></el-icon>
              <span>课程</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="kclb">课程列表</el-menu-item>
              <el-menu-item index="cjkc">创建课程</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>

        </el-menu>
      </el-aside>
      <el-container>
        <el-header>
          
          
          <el-dropdown size="large">
            <span class="el-dropdown-link">
              username
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                 <el-dropdown-item>logout</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <el-icon><share /></el-icon>
          <el-icon><search /></el-icon>
        </el-header>
          <el-main>
            <router-view />
          </el-main>
          <el-footer>
        <el-footer>Build Version: 20210929bd</el-footer>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import{ Odometer,Menu,Aim,Trophy,Collection,InfoFilled,Share,Search,ArrowDown } from '@element-plus/icons-vue'
export default {
  name: 'HelloWorld',
  components:{
    Odometer,
    Menu,
    Aim,
    Trophy,
    Collection,
    InfoFilled,
    Share,
    Search,
    ArrowDown
  },

}
</script>


<style >
.el-header,.el-footer{
  background-color: #9badbf;
  color: var(--el-text-color-primary);
  text-align: center;
}
.el-header{
  background-color: #f9fafc;
}
.el-header> i{
  margin-top: 15px;
  margin-right: 15px;
}
.el-header > .el-dropdown{
  margin-top: 15px;
}
.el-header > .el-dropdown, .el-header > i {
  float: right;
}
.el-aside{
  text-align: center;
}

.el-footer{
  line-height: 60px;
}

.el-main{
  background-color: #cfdae3;
  line-height: 40px;
  height: 520px;
}
.el-dropdown-link {
 font-size: 23px;
 font-weight: bolder;
 cursor: pointer;
 display: flex;
 align-items: center;
}
.el-main, .el-footer {
 background-color: #eae8e8;
}

</style>
